// import WMap from '../map';
const map = new WMap.Map('map', {
	center: [116.48538303047181, 39.99969219049072],
	zoom: 5,
	minZoom: 3,
	maxZoom: 18
})

let isShowAllLpn = true
// 默认的矢量图标
const m1 = new WMap.Marker({
	icon: 'https://webapi.amap.com/images/car.png',
	position: [104.04885959297181, 46.59148906549072]
})

const m2 = new WMap.Marker({
	offset: [-40, -60],
	position: [104.04885959297181, 46.59148906549072]
})

map.add(m1, m2)
// 矢量图标
const marker = new WMap.Marker({
	map: map,
	fontSize: '12px',
	fontFamily: 'sans-serif',
	fontWeight: 'normal',
	fontColor: '#000',
	placement: 'point', // 默认为point
	labelBgColor: '#FFF', // 背景颜色
	borderColor: '#000', // 边框颜色
	borderWidth: '1', // 边框宽度
	textBaseline: 'bottom', // t  似乎无效
	textAlign: 'centrer', //文本对齐方式 ,似乎无效，设置会让文本消失
	labelXOffset: 0, // 水平文本偏移量
	labelYOffset: -30, // 垂直文本偏移量
	padding: [5, 5, 5, 5],
	// 上面为默认配置
	position: [127.40002638117096, 44.034284373652795],
	icon: 'https://webapi.amap.com/images/car.png',
	offset: [-26, -13],
	label: '矢量图标: 旋转不停',
	labelYOffset: -42,
	padding: [5, 5, 5, 5],
	labelBgColor: 'skyblue', // 背景颜色
	angle: -90
})

// content 会覆盖 icon
const marker1 = new WMap.Marker({
	map: map,
	position: new WMap.LngLat(111.75027560859681, 40.81268047174071),
	offset: [-40, -40],
  icon: 'https://webapi.amap.com/images/car.png',
	label: {
		content: buildMarkerContent(),
		offset: [-40, -60]
	},
	extData: {
		lpn: '川A123456789',
		colName: '黄色',
		id: '113123'
	}
})
// const marker2 = new WMap.Marker({
// 	map: map,
// 	position: new WMap.LngLat(116.12283420234681, 43.93279765924071),
// 	icon: 'https://webapi.amap.com/images/car.png',
// 	offset: [-26, -13],
// 	angle: 180,
// 	label: {
// 		content: `<div class='WMap-single-box'> icon +  label 实例化 marker</div>`,
// 		offset: [-132, -50]
// 	}
// })

const marker3 = new WMap.Marker({
	map: map,
	position: [122.14334201484681, 43.51531719049071],
	content: `<img src="https://webapi.amap.com/images/car.png" alt="" style="vertical-align:middle;">`,
	// offset: [-40, -40],
	label: {
		content: `<div class='WMap-single-box' style='text-align: right;'>content + label 实例化 marker</div>`,
		offset: [-92, -34]
	}
})
function buildMarkerContent(item) {
	if (!isShowAllLpn || !item) {
		return ''
	}

	let lpnAndCol = item.lpn + '(' + item.colName + ')'

	let content =
		'<div class="WMap-single-box" style="white-space: nowrap">'+ lpnAndCol + '</div>'
	return content
}
const vehicleDom = document.getElementById('vehicle')
const bindEventDom = document.getElementById('bindEvent')
const unbindEventDom = document.getElementById('unbindEvent')
const setAnimationDom = document.getElementById('setAnimation')
const delAndAdd = document.getElementById('delAndAdd')

let flag = false

//删除/添加一个maker
delAndAdd.onclick = function () {
	if (!flag) {
		map.remove(marker2)
		flag = true
	} else {
		map.add(marker2)
		flag = false
	}
}

//旋转不停
setInterval(() => {
	const angle = marker && marker.getAngle() + 90
	marker && marker.setAngle(angle)
}, 1000)

//设置弹跳动画
setAnimationDom.onclick = function () {
	marker1.setAnimation()
	marker1.setAnimation('WMAP_ANIMATION_BOUNCE')
	setTimeout(function () {
		marker1.setAnimation('WMAP_ANIMATION_NONE')
	}, 1000)
}

//解绑事件
bindEventDom.onclick = function () {
	marker1.on('click', e => {
		console.table(e.target.getPosition())
	})
}

//解绑事件
unbindEventDom.onclick = function () {
	marker1.off('click')
}

// 车牌显示
vehicleDom.onchange = function (e) {
	isShowAllLpn = e.target.checked
  const extData = marker1.getExtentData()
	marker1.setLabel({
		content: buildMarkerContent(extData),
		offset: [-40, -60]
	})
}
// 点击车辆显示车牌
marker1.on('click', e => {
	const extData = e.target.getExtentData()
	e.target.setLabel({
		content: buildMarkerContent(extData),
		offset: [-40, -60]
	})
})

//点击置顶
marker2.on('click', () => {
	marker2.setTop()
})
//点击置顶
marker3.on('click', () => {
	marker3.setTop()
})
